<template>
  <div class="i-page role-page fill-height">
    <div class="i-content white pa-0 d-flex flex-column">
      <el-space :alignment="'stretch'" direction="horizontal" fill size="large">
        <el-space>
          <el-button plain type="primary" @click="api.onCreate()">创建</el-button>
        </el-space>
        <el-table
          :data="api.tableState.dataSource"
          border
        >
          <el-table-column label="名称" prop="name" width="240" />
          <el-table-column label="角色类型" min-width="140" prop="roleTypeName" />
          <el-table-column :align="'center'" label="菜单/权限" width="320">
            <template #default="{ row, column, $index }">
              <el-space>
                <el-button plain size="small" type="primary" @click="api.onEditMenu(row.id)">菜单管理</el-button>
                <el-button plain size="small" type="success" @click="api.onEditOrg(row.id)">数据权限</el-button>
                <el-button plain size="small" type="danger" @click="api.onEditPermission(row.id)">接口权限</el-button>
              </el-space>
            </template>
          </el-table-column>
          <el-table-column :align="'center'" fixed="right" label="操作" width="280">
            <template #default="{ row, column, $index }">
              <el-space>
                <el-button size="small" text type="primary" @click="api.onDetail(row.id)">详情</el-button>
                <el-button v-if="row.parentId !== '0'" size="small" text type="primary" @click="api.onEdit(row.id)">编辑</el-button>
                <el-button size="small" text type="danger" @click="api.onDelete(row.id)">删除</el-button>
              </el-space>
            </template>
          </el-table-column>
        </el-table>
        <div class="d-flex justify-end">
          <el-pagination
            v-model:current-page="api.tableState.pagination.current"
            v-model:page-size="api.tableState.pagination.pageSize"
            :total="api.tableState.pagination.total"
            background
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="api.refreshTable()"
            @current-change="api.refreshTable()"
          />
        </div>
      </el-space>
    </div>

    <Create :api="api" />
    <Edit :api="api" />
    <Detail :api="api" />

    <EditMenu :api="api" />
    <EditOrg :api="api" />
    <EditPermission :api="api" />
  </div>
</template>

<script lang="ts" setup>
import { onMounted } from "vue";
import { RoleApi } from "~/api/system/role/role.api";
import Create from "~/views/system/role/Create.vue";
import Edit from "./Edit.vue";
import Detail from "~/views/system/role/Detail.vue";
import EditMenu from "~/views/system/role/EditMenu.vue";
import EditOrg from "~/views/system/role/EditOrg.vue";
import EditPermission from "~/views/system/role/EditPermission.vue";
import { JsonResult } from "~/api/types";

const api = new RoleApi();

onMounted(() => {
  api.onListPage();
});

api.afterSubmit = (res: JsonResult<any>) => {
  if (res?.ok) {
    api.onEditMenu(res.data.id)
  }
};
</script>

<style lang="scss" scoped>

</style>
